<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>使用SVG寥寥数行实现圆环loading进度效果</title>
    <style>
    svg {
        transform: rotate(-90deg);
    }

    circle[stroke-dasharray] {
        /*stroke-dasharray: 0 1069;*/
        animation: circle 3s linear infinite;
    }

    @keyframes circle {
        to {
            stroke-dasharray: 1069 0;
        }
    }
    </style>
</head>

<body>
    <svg width="440" height="440" viewbox="0 0 440 440">
        <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
        <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" stroke-dasharray="0 1069"></circle>
    </svg>
</body>

</html>
